<template>
  <div>
    <div class="name">
      <div class="name1">
        <div class="left">
          <div class="left1"  @click="fun()">
            <img src="../../../public/moder/tx.png" alt="" />
            <p>点击登录</p>
          </div>
        </div>
         <div>
            <van-sidebar v-model="activeKey" style="width:100%;;">
              <van-sidebar-item title="发现" style="background-color:white" @click="comName='Fx'" /> 
              <van-sidebar-item title="微应用" style="background-color:white"
              @click="comName='Fx'"/>
              <van-sidebar-item title="安全中心" style="background-color:white"
               @click="comName='Ab'"/>
              <van-sidebar-item title="关怀模式" style="background-color:white"
              @click="comName='Fx'"/>
              <van-sidebar-item title="设置" style="background-color:white"
               @click="comName='Ab'"/>
              <van-sidebar-item title="关于" style="background-color:white"
              @click="comName='Ab'" />
            </van-sidebar>
         


          </div>

      </div>

      <div class="name2">  <keep-alive> 
         <component :is="comName"></component>
         
        </keep-alive> </div>
    </div>

    
  </div>
</template>

<script>
import Ab from "./about"
import Fx from "./faxian";
export default {

  components:{
    Fx,
    Ab,
  },
   data() {
    return {
      activeKey: 0,
    };
  },
  methods:{
    fun(){
  this.$router.push("/logins")

    }  }
  
};
</script>

<style lang="less" scoped>
.name {
  display: flex;
  width: 100%;
  height: 100%;
  // color: white;
  justify-content: space-between;
  .name1 {
    width: 30%;
    height: 6.67rem;
    background-color: white;

    .left {
      width: 100%;
      height: 1.8rem;
      font-size: 0.16rem;
      overflow: hidden;

      .left1 {
        width: 0.7rem;
        height: 0.8rem;

        margin: auto;
        margin-top: 0.5rem;
        text-align: center;
      }
    }
  }
  .name2 {
    width: 70%;
    height: 6.67rem;
    background-color: #f8f8f8;
  }
}
</style>